<template>
    <div class="header">我的订单</div>
    <div class="order">
        <ul class="order__box">
            <li class="order__box__item" v-for="(item,index) in list" :key="index">
                <div class="order__box__item__top">
                    <h3 class="order__box__item__top__tlite">{{item.shopName}}</h3>
                    <div class="order__box__item__top__canc">{{item.isCanceled ? '已取消' : '已支付'}}</div>
                </div>
                <div class="order__box__item__content">
                    <div class="order__box__item__content__imgBox" >
                        <template
                        v-for="(items,indexs) in item.products"
                        :key="indexs"
                        >
                            <img :src="items.product.img" alt="jpg" v-if="indexs <= 3">
                        </template>
                    </div>
                    <div class="order__box__item__content__price">
                        <div class="order__box__item__content__price__count">&yen; {{item.taotal}}</div>
                        <div class="order__box__item__content__price__sum">共 {{item.sales}} 件</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <Footer :componName="name"/>
</template>

<script>
import Footer from '../../components/home-components/Footer.vue'
import { getOrderData } from '../../utils/axiosPost'
import { reactive, toRefs } from 'vue'

const orderData = () => {
  const pageData = reactive({ list: [] })
  const getOrderFn = async () => {
    const result = await getOrderData('/api/order')
    if (result?.errno === 0 && result?.data?.length) {
      const orderList = result?.data || []
      orderList.forEach(item => {
        let taotal = 0
        let sales = 0
        const products = item?.products || []
        products.forEach(item => {
          taotal += (item?.product?.price * item?.orderSales) || 0
          sales += item?.orderSales || 0
        })
        item.taotal = taotal
        item.sales = sales
      })
      pageData.list = orderList
    }
  }
  getOrderFn()
  const { list } = toRefs(pageData)
  return { list }
}

export default {
  name: 'Order',
  components: { Footer },
  data () {
    return {
      name: ''
    }
  },
  created () {
    this.name = this.$options.name
  },
  setup () {
    const { list } = orderData()
    return { list }
  }
}
</script>

<style lang="scss" scoped>
.header {
    line-height: .44rem;
    text-align: center;
    font-size: .16rem;
    color: #333333;
}
.order {
    position: absolute;
    top: .44rem;
    bottom: .49rem;
    left: 0;
    right: 0;
    background: #f1f1f1;
    &__box {
        list-style: none;
        margin:0 .18rem;
        padding:0;
        &__item {
            width: 100%;
            height: 1.1rem;
            background: #ffffff;
            border-radius: .04rem;
            margin-top: .16rem;
            &__top {
                padding:.16rem;
                display: flex;
                justify-content: space-between;
                &__tlite {
                    font-size: .16rem;
                    color: #333333;
                    margin:0;
                    line-height: .2rem;
                }
                &__canc {
                    font-size: .14rem;
                    color: #999999;
                    line-height: .2rem;
                }
            }
            &__content {
                padding:0 .16rem .16rem .16rem;
                display: flex;
                justify-content: space-between;
                &__imgBox {
                    display: flex;
                    justify-content: flex-start;
                    img:first-child {
                        padding-left: 0;
                    }
                    img {
                        width: .4rem;
                        height: .4rem;
                        padding:0 .06rem;
                        vertical-align: bottom;
                    }
                    img:last-child {
                        padding-right:0;
                    }
                }
                &__price {
                    text-align: right;
                    &__count {
                        font-size: .14rem;
                        color: #E93B3B;
                        line-height: .2rem;
                        padding-bottom: .04rem;
                    }
                    &__sum {
                        font-size: .12rem;
                        color: #333333;
                        line-height: .14rem;
                    }
                }
            }
        }
    }
}
</style>
